<template>
  <div class="miss">
    <h1>404</h1>
    <p>找不到该页面</p>
    <img src="@/assets/littelBoy.png" alt="404" />
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.miss {
  position: relative;
  background-color: #242834;
  margin: 150px auto 0 auto;
  width: 700px;
  height: 500px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
}
img {
  height: 400px;
  width: 400px;
  position: absolute;
  bottom: 0;
  left: -80px;
  z-index: 1;
}
h1 {
  z-index: 0.5;
  color: #fff;
  font-size: 300px;
  position: absolute;
  top: -60px;
  right: -20px;
}
p {
  font-size: 50px;
  color: #6d5ed4;
  position: absolute;
  bottom: 110px;
  right: 100px;
}
</style>